<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-07-07 18:15:05
 * @LastEditTime: 2023-04-13 10:40:44
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\views\Login\components\AccountLogin.vue
 * Copyright 版权声明
-->
<template>
  <el-form
    class="login-form"
    autocomplete="on"
    :model="loginForm"
    :rules="loginRules"
    ref="loginForm"
  >
    <el-form-item prop="loginName">
      <el-input
        name="loginName"
        type="text"
        @keyup.enter="handleLogin"
        v-model="loginForm.loginName"
        autocomplete="on"
        clearable
        placeholder="账户"
      >
        <template #prefix>
          <el-icon><user /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        name="password"
        :type="pwdType"
        @keyup.enter="handleLogin"
        v-model="loginForm.password"
        autocomplete="on"
        placeholder="密码"
      >
        <template #prefix>
          <el-icon><unlock /></el-icon>
        </template>
        <template #suffix>
          <el-icon v-show="pwdType === 'password'" @click="showPwd()" style="cursor:pointer;"><View /></el-icon>
          <el-icon v-show="pwdType === ''" @click="showPwd()" style="cursor:pointer;"><Hide /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <div class="my-verify-code">
        <el-input
          name="code"
          type="text"
          @keyup.enter="handleLogin"
          v-model="loginForm.code"
          autoComplete="on"
          placeholder="请输入验证码"
          maxlength="6"
      >
        <template #prefix>
          <svg-icon icon-class="my-yanzhengma"/>
        </template>
      </el-input>
        <img :src="verifyCodeImg" class="verify-code verify-code-image" @click="refreshVerifyCode" title="点击刷新验证码">
      </div>
    </el-form-item>
    <el-form-item>
      <div class="handle-txt">
        <span class="left-txt">
          <!-- <el-checkbox v-model="autoLogin">自动登录</el-checkbox> -->
          <el-checkbox v-model="autoLogin">记住我</el-checkbox>
        </span>
        <span class="right-txt">
          <router-link to="/">
            忘记密码
          </router-link>
        </span>
      </div>
    </el-form-item>
    <el-form-item class="el-form-item_submit">
      <el-button type="primary" :loading="loading" @click.prevent="handleLogin" class="login-btn">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 图标组件
import { User, Unlock, View, Hide } from '@element-plus/icons-vue'
import { isvalidUsername } from '@/utils/validate'
import { getVerifyCode } from '@/api/login'
import { getLoginInfo } from '@/utils/auth'

export default {
  name: 'AccountLogin',
  components: {
    User,
    Unlock,
    View,
    Hide
  },
  data() {
    // 校验用户名
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入账户名'))
      } else {
        callback()
      }
    }
    // // 校验密码
    // const validatePass = (rule, value, callback) => {
    //   if (value.length < 6) {
    //     callback(new Error('密码不能小于6位'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      autoLogin: false, // 是否自动登录
      verifyCodeImg: '', // 验证码图片
      loginForm: {
        loginName: '', // 账号
        password: '', // 	密码
        code: '', // 	图形验证码
        k: ''
      },
      loginRules: {
        loginName: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        // /*, validator: validatePass*/
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
        code: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
      },
      loading: false,
      pwdType: 'password'
    }
  },
  computed: {
  },
  created() {
    const autoLoginInfo = getLoginInfo()
    if (autoLoginInfo.autoLogin === true) {
      this.autoLogin = autoLoginInfo.autoLogin
      this.loginForm.loginName = autoLoginInfo.loginName
      this.loginForm.password = autoLoginInfo.password
    }
    this.refreshVerifyCode()
  },
  methods: {
    // 刷新验证码
    async refreshVerifyCode() {
      // this.verifyCodeImg = getVerifyCode()const res = await getVerifyCode()
      const res = await getVerifyCode()
      this.loginForm.k = res.key
      this.verifyCodeImg = res.image
    },
    // 切换密码显示方式
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    // 登录操作
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('Login', {
              loginData: this.loginForm,
              loginType: 'ACCOUNT',
              autoLogin: this.autoLogin
            })
            .then((res) => {
              this.loading = false
              this.$router.push({ path: '/' })
            })
            .catch(() => {
              this.refreshVerifyCode()
              this.loading = false
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
</style>

